import { useEffect } from "react";

interface Props {
  controls?: boolean;
  autoPlay?: boolean;
  muted?: boolean; // 静音
  crossOrigin?: "anonymous" | "use-credentials";
  controlsList?: string; // nodownload、nofullscreen、noremoteplayback、noplaybackrate：禁止用户改变视频的播放速度、novolumecontrol：隐藏音量控制滑块，用户无法调整音量、noseeking：阻止用户快进或倒带视频、none：不限制任何控件，允许所有标准的控件功能
  disablePictureInPicture?: boolean; // 画中画
  disableRemotePlayback?: boolean; // 禁用远程播放功能
  height?: number;
  width?: number;
  loop?: boolean;
  playsInline?: boolean; // playsinline 属性不影响桌面浏览器的行为，它主要针对移动设备
  poster?: string; // 海报帧图片url
  preload?: "none" | "metadata" | "auto" | "";
  src?: string;
  currentTime?: number;
}

export const VideoDemo = (props: Props) => {
  const {
    controls = true,
    autoPlay = false,
    muted = false,
    crossOrigin = "anonymous",
    preload = "none",
    disablePictureInPicture = true,
    disableRemotePlayback,
    width = 400,
    height = 300,
    loop = false,
    playsInline,
    currentTime = 0,
  } = props;
  useEffect(() => {
    const ele = document.querySelector("video");
    if (ele) {
      ele.currentTime = currentTime;
    }
    return () => {};
  }, [currentTime]);
  return (
    <div>
      <video
        controls={controls}
        poster="@/../public/王者荣耀.jpg"
        src="@/../public/王者荣耀.mp4"
        width={width}
        height={height}
        autoPlay={autoPlay}
        muted={muted}
        crossOrigin={crossOrigin}
        preload={preload}
        disablePictureInPicture={disablePictureInPicture}
        disableRemotePlayback={disableRemotePlayback}
        loop={loop}
        playsInline={playsInline}
      ></video>
    </div>
  );
};
